<template>
    <div>
        <!-- Tab标签页 -->
        <van-tabs v-model="active" swipeable  @click="showList">
            <van-tab title="全部">
                <div :key='item.id' v-for="item in pic" class="app1" @click="photoClick(item.id)">
                      <img :src="item.img_url" class="photo" v-lazy="item.img_url">
                    <div class="character">
                        <p>{{item.title}}</p>
                        <p>{{item.seo_description}}</p>
                    </div>
                </div>
            </van-tab>
            <van-tab :key="item.id" v-for="item in list" :title="item.title">
                <div :key='item.id' v-for="item in pic" class="app1" @click="photoClick(item.id)">
                    <img  :src="item.img_url" class="photo">
                    <div class="character">
                        <p>{{item.title}}</p>
                        <p>{{item.zhaiyao}}</p>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      list: [],
      pic: []
    }
  },

  created () {
    this.getList()
    // 调用加载函数loadList()
    this.loadList()
  },

  methods: {
    // 获取图片列表数据
    async getList () {
      const { data: res } = await this.$axios.get('/api/getimgcategory')
      // console.log(res)
      this.list = res.message
    },
    // 点击全部显示全部信息内容
    async showList (name, title) {
      if (title === '全部') {
        var uid = 0
      } else {
        var index = name - 1
        var id = this.list[index].id
      }
      // console.log(name, title)
      const { data: res } = await this.$axios.get(`/api/getimages/${title === '全部' ? uid : id}`)
      // console.log(res)
      this.pic = res.message
    },
    // 加载进入就显示内容
    async loadList () {
      const { data: res } = await this.$axios.get('/api/getimages/0')
      // console.log(res)
      this.pic = res.message
    },
    photoClick (id) {
      this.$router.push(`/photo/list/${id}`)
    }
  }
}
</script>

<style scoped lang='less'>
.photo{
    width: 95%;
    margin-top: 10px;
    border-radius: 5px;
}
.character{
    width: 95%;
    height: 75px;
    margin: 0 auto;
    background:rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom:5px;
    border-radius: 0 0 5px 5px;
    left: 50%;
    transform: translate(-50%);
    color: #fff;
    text-align: left;
    font-size: 12px;
    overflow: hidden;
}
.app1{
    text-align:center;
    position: relative;
}
.app1:nth-last-child(1){
    margin-bottom: 50px;
}
p{
    margin: 5px 0 0 0;
    padding: 0 10px;
}
</style>
